<template>
  <div class="home-container">
    <div class="home">
      <compHeader></compHeader>
      <van-swipe :autoplay="3000" indicator-color="#2c3e50">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img v-lazy="item.image_url" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in channel"
          :key="item.id"
          :icon="item.icon_url"
          :text="item.name"
          @click="gotoCate(item.id)"
        />
      </van-grid>
      <!-- 品牌制造商直供 -->
      <div class="brand">
        <div class="title">品牌制造商直供</div>
        <ul>
          <li v-for="item in brandList" :key="item.id">
            <router-link :to="`/brandDetail?id=${item.id}`">
              <img :src="item.pic_url" alt="" />
              <div class="text">
                <p>{{ item.name }}</p>
                <p>{{ item.floor_price | filterMoney }}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 新品首发 -->
      <div class="newGoods">
        <div class="title">新品首发</div>
        <product :goodsList="newGoodsList"></product>
      </div>
      <!-- 热门产品 -->
      <div class="hotGoods">
        <div class="title">热门产品</div>
        <product :goodsList="hotGoodsList"></product>
      </div>
      <div class="topic">
        <div class="title">专题精选</div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="item in topicList" :key="item.id">
            <img v-lazy="item.scene_pic_url" width="100%" />
            <div class="text">
              <p>{{ item.title }}</p>
              <p>{{ item.subtitle }}</p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <compTabbar></compTabbar>
    </div>
    <transition name="van-slide-right" v-if="$route.path == '/home/popup'">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import compHeader from "@/components/compHeader.vue";
import compTabbar from "@/components/compTabbar.vue";
import product from "@/components/product.vue";
import { getHomeData, getBrandDetail } from "@/request/api.js";
export default {
  components: {
    compHeader,
    compTabbar,
    product,
  },
  data() {
    return {
      banner: [],
      channel: [],
      newGoodsList: [],
      hotGoodsList: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
    };
  },
  methods: {
    gotoCate(id) {
      this.$router.push("/category?cid=" + id);
    },
  },
  created() {
    getHomeData().then((res) => {
      if (res.errno == 0) {
        let {
          banner,
          channel,
          brandList,
          newGoodsList,
          hotGoodsList,
          topicList,
          categoryList,
        } = res.data;
        this.banner = banner;
        this.channel = channel;
        this.brandList = brandList;
        this.newGoodsList = newGoodsList;
        this.hotGoodsList = hotGoodsList;
        this.topicList = topicList;
        this.categoryList = categoryList;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.home-container {
  padding-bottom: 80px;
}
/deep/ .van-swipe {
  height: 200px;
  img {
    width: 100%;
  }
}
.title {
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.brand {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    li {
      width: 49%;
      margin-bottom: 10px;
      position: relative;
      img {
        width: 100%;
        filter: brightness(0.9);
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px;
        p {
          &:nth-child(1) {
            margin-top: 10px;
          }
          &:nth-child(2) {
            margin-top: 15px;
            color: darkred;
          }
        }
      }
    }
  }
}
.brand,
.newGoods,
.hotGoods,
.topic {
  margin-top: 10px;
  background-color: #fff;
}
.topic {
  .text {
    text-align: center;
    p {
      &:nth-child(1) {
        margin-top: 10px;
      }
      &:nth-child(2) {
        margin-top: 15px;
        color: darkred;
      }
    }
  }
}
// .slide-enter,slide-leave-to {
//   right: -100%;
// }
// .slide-enter-active,.slide-leave-active {
//   transition: right 1s linear;
// }
// .slide-enter-to,.slide-leave {
//   right: 0;
// }
</style>